import React, { PureComponent } from 'react';
 
import { Table, Tag } from 'antd'; 
import { Resizable } from 'react-resizable';

import styles from './index.css';

/**
 * 检索:数据表格
 */
export class Index extends PureComponent {

  columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status) => (
        <span>
          {
            <Tag color={status == '正常'? '#78cd51': '#f50'}>{status == '正常'? '正常': '禁用'}</Tag>
          }
        </span>
      )
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: 'KeyID',
      dataIndex: 'KeyID',
    },
    {
      title: 'KeySecret',
      dataIndex: 'KeySecret'
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: 'IP地址',
      dataIndex: 'address',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => {
        if (record.status == '正常') {
          return (
            <>
              <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.editTagClickedHandler(record) } }> 编辑 </Tag>
              <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.statusTagClickedHandler(record) } }> 禁用 </Tag>
            </>
          )
        }else{
          return (
            <>
              <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.editTagClickedHandler(record) } }> 编辑 </Tag>
              <Tag color={'blue'} style={ { cursor: 'pointer' } } onClick={ () => { this.statusTagClickedHandler(record) } }> 启用 </Tag>
            </>
          )
        }
      }
    },
  ];

  render() {
    // const { total, list, page, limit } = this.props.state;
    const list = [
      {
        id:'1',
        address: '132.134.34.1',
        remarks:'备注',
        status:'正常',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'2',
        address: '132.134.34.0',
        remarks:'备注',
        status:'正常',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'3',
        address: '132.134.34.2',
        remarks:'备注',
        status:'正常',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'4',
        address: '132.134.34.1',
        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'5',
        address: '132.134.34.2',
        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'11',
        address: '132.134.34.1',
        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'6',
        address: '132.134.34.7',
        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'7',
        address: '132.134.34.1',
        remarks:'备注',
        status:'正常',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'8',
        address: '132.134.34.7',

        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'9',
        address: '132.134.34.0',
        remarks:'备注',
        status:'正常',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
      {
        id:'10',
        address: '132.134.34.1',
        remarks:'备注',
        status:'禁用',
        name:'发布人',
        KeyID:'234278978',
        KeySecret:'3kkj3454ljk434',
        gmtCreate:'2020-09-20 12:00:00',
      },
    ];
    const page = 1;
    const limit = 10;

    return (
      <div className={styles.data_table}>
        {/* 数据表单 */}
        <Table
          rowKey="id"
          scroll={{
            x: true
          }}
          rowSelection={{
            onChange: this.tableRowSelectionChangedHandler
          }}
          columns={this.columns} 
          dataSource={list}
          pagination={{
            position: 'bottom',
            total: list.length,
            showTotal: (total, range) => `共${total}条数据`,
            itemRender: (page, type, originalElement) => {
              if (type === 'prev') {
                return <button className={styles.prev_btn}>上一页</button>;
              }
              if (type === 'next') {
                return <button className={styles.prev_btn}>下一页</button>;
              }
              return originalElement;
            },
            current: page,
            defaultCurrent: 1,
            defaultPageSize: limit,
            onChange: this.pageChangedHandler,
            showSizeChanger: true,
            onShowSizeChange: this.pageSizeChangedHandler,
            showQuickJumper: true,
            hideOnSinglePage: false,
          }}
        />
      </div>
    )
  }

  
  /**
  * 编辑标签点击事件
  */
 editTagClickedHandler = (record) => {
  const { onEdit } = this.props;
  !!onEdit && onEdit(record);
 }

  /**
  * 状态标签点击事件
  */
  statusTagClickedHandler = (record) => {
    const { onRecordStatusChange } = this.props;
    !!onRecordStatusChange && onRecordStatusChange(record);
  }

  /**
   * 页数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageChangedHandler = (page, pageSize) => {
    const { onPageChange } = this.props;
    !!onPageChange && onPageChange(page, pageSize);
  }

  /**
   * 每页显示记录数被改变时
   * page：当前页数
   * pageSize：改变后的每页记录数
   */
  pageSizeChangedHandler = (page, pageSize) => {
    const { onPageSizeChange } = this.props;
    !!onPageSizeChange && onPageSizeChange(page, pageSize);
  }
}

export default Index;
